<template>
  <el-card class="box-card" shadow="hover">
    <el-col :span="20" :offset="2">
      <div class="block">
        <el-timeline>
          <el-timeline-item v-for="(item,index) in historyProcNodeList" :key="index" :icon="setIcon(item.endTime)" :color="setColor(item.endTime)">
            <p style="font-weight: 700">{{ item.activityName }}</p>
            <el-card v-if="item.activityType === 'startEvent'" class="box-card" shadow="hover"> {{ item.assigneeName }} 在 {{ item.createTime }} 发起流程 </el-card>
            <el-card v-if="item.activityType === 'userTask'" class="box-card" shadow="hover">
              <el-descriptions :column="3" class="work-record-label">
                <el-descriptions-item label="实际办理：" width="35%">{{ item.assigneeName || '-'}}</el-descriptions-item>
                <el-descriptions-item label="候选办理：" width="35%">{{ item.candidate || '-'}}</el-descriptions-item>
                <!-- 空标签用于占位置 -->
                <el-descriptions-item width="20%" />
              </el-descriptions>
              <el-descriptions :column="3" class="work-record-label">
                <el-descriptions-item label="接收时间" width="35%">{{ item.createTime || '-'}}</el-descriptions-item>
                <el-descriptions-item label="办结时间" width="35%">{{ item.endTime || '-' }}</el-descriptions-item>
                <el-descriptions-item label="耗时" width="20%">{{ item.duration || '-'}}</el-descriptions-item>
              </el-descriptions>
              <div v-if="item.commentList && item.commentList.length > 0">
                <div v-for="(comment, index) in item.commentList" :key="index">
                  <el-divider content-position="left">
                    <el-tag :type="approveTypeTag(comment.type)" size="small">{{ commentType(comment.type) }}</el-tag>
                  </el-divider>
                  <span>{{ comment.fullMessage }}</span>
                </div>
              </div>
            </el-card>
            <el-card v-if="item.activityType === 'endEvent'" class="box-card" shadow="hover"> {{ item.createTime }} 结束流程 </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-col>
  </el-card>
</template>

<script setup lang="ts">

withDefaults(defineProps<{
  historyProcNodeList: any;
}>(), {
  historyProcNodeList: []
});

const commentType = (val: string) => {
  switch (val) {
    case '1': return '通过';
    case '2': return '退回';
    case '3': return '驳回';
    case '4': return '委派';
    case '5': return '转办';
    case '6': return '终止';
    case '7': return '撤回';
  }
};
const approveTypeTag = (val: string) => {
  switch (val) {
    case '1': return 'success';
    case '2': return 'warning';
    case '3': return 'danger';
    case '4': return 'primary';
    case '5': return 'success';
    case '6': return 'danger';
    case '7': return 'info';
  }
};

const setIcon = (val: string) => {
  if (val) {
    return 'el-icon-check';
  } else {
    return 'el-icon-time';
  }
};

const setColor = (val: string) => {
  if (val) {
    return '#2bc418';
  } else {
    return '#b3bdbb';
  }
};
</script>

<style lang="scss" scoped>
.box-card {
  width: 100%;
  margin-bottom: 20px;

  :deep(.work-record-label) {

    .el-descriptions__label {
      font-weight: bold;
    }
  }
}
.el-tag + .el-tag {
  margin-left: 10px;
}
</style>
